<template>
  <div class="myAttention">
    <div class="nav-top">
      <div
        v-for="(item, index) in tabsList"
        :key="index"
        :class="current === index ? 'active' : ''"
        @click="goPage(item, index)"
      >
        {{ item.title }}
      </div>
    </div>
    <component :is="activeRoute" />
  </div>
</template>

<script>
  import myRegister from "./myAppoint/myRegister.vue";
  import myAppointDeail from "./myAppoint/myAppointDeail.vue";
  export default {
    data() {
      return {
        current: 0,
        activeRoute: "myRegister",
        tabsList: [
          { title: "挂号", routeName: "myRegister" },
          { title: "实训实践基地", routeName: "myAppointDeail" }
        ],
      };
    },
    components: { myRegister,myAppointDeail },
    methods: {
      goPage(item, index) {
        this.activeRoute = item.routeName;
        this.current = index;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .myAttention {
    width: calc(1650 / 1920 * 100vw);
    background: #fff;
    position: absolute;
    top: calc(350 / 1920 * 100vw);
    left: calc(240 / 1920 * 100vw);
    padding: calc(10 / 1920 * 100vw) calc(40 / 1920 * 100vw)
    calc(40 / 1920 * 100vw);
    .nav-top {
      display: flex;
      position: absolute;
      top: calc(-40 / 1920 * 100vw);
      left: calc(0 / 1920 * 100vw);
      div {
        width: calc(120 / 1920 * 100vw);
        height: calc(40 / 1920 * 100vw);
        text-align: center;
        line-height: calc(40 / 1920 * 100vw);
      }
      .active {
        background: #fff;
        border-radius: calc(10 / 1920 * 100vw) calc(10 / 1920 * 100vw) 0px 0px;
      }
    }
  }
</style>
